<template>
    <div id="map">

    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import {XYZ, OSM} from 'ol/source'
    import TileLayer from 'ol/layer/Tile'
    import {defaults as defaultControls} from 'ol/control.js';
    import {OverviewMap} from 'ol/control';

    export default {
        name: "OverViewControl",
        data() {
            return {
                map: null,
            }
        },
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    })
                ], controls: defaultControls({
                    zoom: false//禁用右上角缩放组件
                }),//地图控件
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12,  //缩放到的级别
                })
            });
            this.overViewCtl()
        },
        methods: {
            overViewCtl() {
                let overviewMap = new OverviewMap({
                    //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
                    className: 'ol-overviewmap ol-custom-overviewmap',
                    layers: [
                        new TileLayer({
                            source: new XYZ({
                                url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                            }),
                        })
                    ],
                    //当前的鹰眼图会跟随当前的视图旋转
                    rotateWithView:true,
                    collapseLabel: '\u00BB',
                    //鹰眼控件折叠时功能按钮上的标识
                     label: '\u00AB',
                    //初始为展开显示方式
                    collapsed: true,
                });
                this.map.addControl(overviewMap)
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    /*=S 自定义鹰眼样式 */
    #map>>>.ol-custom-overviewmap, .ol-custom-overviewmap {
        width: 152px;
        height: 152px;
    }
    /* 鹰眼控件中地图容器样式 */
    #map>>>.ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
    }
    /* 鹰眼控件中显示当前窗口中主图区域的边框 */
    #map>>>.ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
    }
    /* 鹰眼控件展开时其控件按钮图标的样式 */
    #map>>>.ol-custom-overviewmap:not(.ol-collapsed) button {
        right: 2px;
        top: 2px;
    }
</style>